<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover" style="margin-bottom: 40px">
          <div slot="header">
            <span>快捷方式</span>
          </div>
          <div class="quickBox">
            <div class="quickBox-item" @click="$router.push('/procurement')">
              <div>
                <i class="el-icon-shopping-cart-2 iconsize"></i>
              </div>
              <br />

              <span>采购单</span>
            </div>
            <div class="quickBox-item" @click="$router.push('/teamWork')">
              <div>
                <i class="el-icon-document-remove iconsize"></i>
              </div>
              <br />

              <span>协同记录</span>
            </div>
            <div class="quickBox-item" @click="$router.push('/detailSearch')">
              <div>
                <i class="el-icon-search iconsize"></i>
              </div>
              <br />

              <span>搜索物料</span>
            </div>
          </div>
        </el-card>

        <div class="calendar">
          <!-- <el-calendar /> -->
          <el-calendar />
        </div>
      </el-col>

      <el-col :span="16">
        <el-tabs type="border-card">
          <!-- <el-tab-pane>
            <span slot="label"><i class="el-icon-date"></i> 协同进度</span>
            <div style="margin-bottom: 30px">
              <div
                style="
                  width: 100%;
                  height: 600px;
                  margin-bottom: 30px;
                  margin-top: 30px;
                "
              >
                <div
                  class="chart1"
                  ref="chart1"
                  style="width: 1080px; height: 600px"
                ></div>
              </div>
            </div>
          </el-tab-pane> -->
          <el-tab-pane>
            <span slot="label"><i class="el-icon-tickets"></i> 协同记录</span>
            <el-card shadow="hover" style="margin-bottom: 30px">
              <div slot="header" class="header">
                <span>协同记录</span>
                <span>
                  <el-link
                    style="font-size: 15px"
                    :underline="false"
                    @click="$router.push('/teamWork')"
                    >查看更多<i
                      class="el-icon-d-arrow-right el-icon--right"
                    ></i> </el-link
                ></span>
              </div>

              <div class="table">
                <el-table
                  :data="tableData"
                  stripe
                  style="width: 100%"
                  height="500"
                >
                  <el-table-column
                    prop="FDOCUMENTSTATUS"
                    label="状态"
                    width="180"
                  >
                  </el-table-column>
                  <el-table-column prop="FBILLNO" label="单据号" width="180">
                  </el-table-column>
                  <el-table-column prop="FApplicationDate" label="申请日期">
                  </el-table-column>
                  <el-table-column prop="FCreateDate" label="创建日期">
                  </el-table-column>
                  <el-table-column prop="Creater" label="创建人">
                  </el-table-column>
                  <el-table-column prop="FAPPROVEDATE" label="审核日期">
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-tab-pane>
          <!-- <el-tab-pane label="采购申请">角色管理</el-tab-pane> -->
          <el-tab-pane label="">
            <span slot="label"><i class="el-icon-receiving"></i> 采购申请</span>
            <el-card shadow="hover" style="margin-bottom: 30px">
              <div slot="header" class="header">
                <span>采购申请</span>
                <span>
                  <el-link
                    style="font-size: 15px"
                    :underline="false"
                    @click="$router.push('/procurement')"
                    >查看更多<i
                      class="el-icon-d-arrow-right el-icon--right"
                    ></i> </el-link
                ></span>
              </div>

              <div class="table">
                <el-table
                  :data="tableData2"
                  stripe
                  style="width: 100%"
                  height="500"
                >
                  <el-table-column
                    prop="FDOCUMENTSTATUS"
                    label="状态"
                    width="180"
                  >
                  </el-table-column>
                  <el-table-column prop="FBILLNO" label="单据号" width="180">
                  </el-table-column>
                  <el-table-column prop="FApplicationDate" label="申请日期">
                  </el-table-column>
                  <el-table-column prop="" label="创建日期"> </el-table-column>
                  <el-table-column prop="" label="创建人"> </el-table-column>
                  <el-table-column prop="" label="审核日期"> </el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
// import * as echarts from "echarts"; // 引入所有的echarts
import { geteDrawingListApi } from "@/api/teamWork";
import { getImportPurchaseListApi } from "@/api/procurement";

export default {
  name: "Dashboard",
  data() {
    return {
      tableData: [],
      tableData2: [],
      queryData: {
        number: 10,
        intPage: 1,
        FBILLNO: "",
      },
      queryData2: {
        number: 10,
        intPage: 1,
        TrueName: "admin",
        searchtimes: "0",
      },
    };
  },
  created() {
    this.geteDrawingList();
    this.getImportPurchaseList();
  },
  // mounted() {
  //   this.chart1 = echarts.init(this.$refs.chart1);
  //   this.chart1.setOption(
  //     {
  //       series: [
  //         {
  //           type: "gauge",
  //           center: ["50%", "60%"],
  //           startAngle: 200,
  //           endAngle: -20,
  //           min: 0,
  //           max: 100,
  //           splitNumber: 20,
  //           itemStyle: {
  //             color: "#40B5AD",
  //           },
  //           progress: {
  //             show: true,
  //             width: 30,
  //           },
  //           pointer: {
  //             show: false,
  //           },
  //           axisLine: {
  //             lineStyle: {
  //               width: 30,
  //             },
  //           },
  //           axisTick: {
  //             distance: -45,
  //             splitNumber: 5,
  //             lineStyle: {
  //               width: 2,
  //               color: "#4ac8a8",
  //             },
  //           },
  //           splitLine: {
  //             distance: -52,
  //             length: 14,
  //             lineStyle: {
  //               width: 3,
  //               color: "#40B5AD",
  //             },
  //           },
  //           axisLabel: {
  //             distance: -20,
  //             color: "#40B5AD",
  //             fontSize: 20,
  //           },
  //           anchor: {
  //             show: false,
  //           },
  //           title: {
  //             show: false,
  //           },
  //           detail: {
  //             valueAnimation: true,
  //             width: "60%",
  //             lineHeight: 40,
  //             borderRadius: 8,
  //             offsetCenter: [0, "-15%"],
  //             fontSize: 60,
  //             fontWeight: "bolder",
  //             formatter: "{value} %",
  //             color: "inherit",
  //           },
  //           data: [
  //             {
  //               value: 20,
  //             },
  //           ],
  //         },
  //         {
  //           type: "gauge",
  //           center: ["50%", "60%"],
  //           startAngle: 200,
  //           endAngle: -20,
  //           min: 0,
  //           max: 100,
  //           itemStyle: {
  //             color: "#40B5AD",
  //           },
  //           progress: {
  //             show: true,
  //             width: 8,
  //           },
  //           pointer: {
  //             show: false,
  //           },
  //           axisLine: {
  //             show: false,
  //           },
  //           axisTick: {
  //             show: false,
  //           },
  //           splitLine: {
  //             show: false,
  //           },
  //           axisLabel: {
  //             show: false,
  //           },
  //           detail: {
  //             show: false,
  //           },
  //           data: [
  //             {
  //               value: 20,
  //             },
  //           ],
  //         },
  //       ],
  //     },
  //     setInterval(() => {
  //       const random = +(Math.random() * 100).toFixed(2);
  //       this.chart1.setOption({
  //         series: [
  //           {
  //             data: [
  //               {
  //                 value: random,
  //               },
  //             ],
  //           },
  //           {
  //             data: [
  //               {
  //                 value: random,
  //               },
  //             ],
  //           },
  //         ],
  //       });
  //     }, 2000)
  //   );
  // },
  methods: {
    async geteDrawingList() {
      const res = await geteDrawingListApi(this.queryData);
      console.log(res);
      // this.total = res.data.total;
      this.tableData = res.data.rows;
    },
    async getImportPurchaseList() {
      const res = await getImportPurchaseListApi(this.queryData2);
      console.log(res);
      this.tableData2 = res.data.rows;
      // this.total = res.data.total;
    },
  },
  // computed: {
  //   ...mapGetters(["name"]),
  // },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    ::v-deep .el-calendar-day {
      height: 40px;
    }
    ::v-deep .el-calendar-table__row td,
    ::v-deep .el-calendar-table tr td:first-child,
    ::v-deep .el-calendar-table__row td.prev {
      border: none;
    }
    ::v-deep .el-calendar-table td.is-selected .text {
      background: #40b5ad;
      color: #fff;
      border-radius: 50%;
    }
    ::v-deep .el-calendar__header {
      display: none;
    }
    ::v-deep .el-calendar-table__row {
      text-align: center;
    }
    ::v-deep .el-calendar-table td.is-today {
      color: #30b08f;
    }

    ::v-deep
      .el-tabs--border-card
      > .el-tabs__header
      .el-tabs__item:not(.is-disabled):hover {
      color: #30b08f;
    }

    // ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    //   color: #30b08f;
    // }

    // ::v-deep .el-tabs__item .is-top .is-active :hover {
    //   color: #30b08f;
    // }
    ::v-deep .el-tabs__item.is-active {
      color: #30b08f;
    }
    // margin: 20px;
    // background-color: #fff;
    .quickBox {
      display: flex !important;
      justify-content: space-around;
      // width: 100%;
      // height: 300px;
      // padding: 10px;
      .quickBox-item {
        padding: 10px;
        width: 20%;
        text-align: center;
        cursor: pointer;
        color: #30b08f;
        border: 1px solid #fff;
        transition: transform 0.5s; /* 添加过渡效果 */

        .iconsize {
          font-size: 25px;
        }
      }
      .quickBox-item:hover {
        box-shadow: 0 0 10px #ccc;
        transform: scale(1.05); /* 在hover时放大为原来的1.2倍 */
        // transform: translateZ(20px);
        border: 1px solid #30b08f;
      }
    }

    .header {
      display: flex;
      justify-content: space-between;
    }

    .table {
      margin-bottom: 20px;
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
